<template>
  <el-container class="main-container">
    <el-aside :width="isCollapse ? '64px' : '210px'" class="main-aside">
      <nav-menu :collapse="isCollapse"></nav-menu>
    </el-aside>
    <el-container class="main-children">
      <el-header class="main-header">
        <nav-header @foldChange="handleFoldChange"></nav-header>
      </el-header>
      <el-main class="main">
        <div class="main-cpn">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import NavMenu from '@/components/nav-menu'
import NavHeader from '@/components/nav-header'
import { defineComponent, ref } from 'vue'

const isCollapse = ref(false)

const handleFoldChange = (isFold: boolean) => {
  isCollapse.value = isFold
}
</script>

<style scoped lang="less">
.main-container {
  height: 100%;
  .main-aside {
    background-color: #001529;
  }
  .main-children {
    .main-header {
      background-color: #fff;
    }
    .main {
      background-color: #f0f2f6;
    }
  }
}
</style>
